<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">

<div class="content-wrapper" th:fragment="set-list">
        <!-- Main content -->
    <nav class="navbar nav-pills">
        <div class="container-fluid">
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="nav-justified">
                <ul class="nav navbar-nav">
                    <li class="active "><a href="C1C2C3C4">C1C2C3C4</a></li>
                    <li ><a href="A1A3B1">A1A3B1</a></li>
                    <li ><a href="A2B2">A2B2</a></li>
                    <li ><a href="DEF">DEF</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>分类列表</li>
            </ul>
            <ul class="list-group" >
                <li class="list-group-item list-group list-group-item-success" th:each="ptype : ${psetTypes}"><a class="set-type" th:text="${ptype.type}" th:id="${ptype.id}"></a></li>
            </ul>
        </div>
        <div class="col-lg-4">
            <table class="table table-bordered dataTable">
                <tr>
                    <th>ID</th>
                    <th>分类</th>
                    <th><a class="btn btn-warning" data-toggle="modal" data-target="#set-add">新增套题</a></th>


                </tr>
                <tbody id="tboody">
                </tbody>

            </table>
        </div>
        <div class="col-lg-6">
            <table class="table table-bordered table-striped dataTable">
                <tr>
                    <th>ID</th>
                    <th>题目</th>
                    <th>操作</th>
                </tr>
                <tbody id="pset">
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="subject-add" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加题目</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="subject-id">题目编号</label>
                            <input type="text" class="form-control" id="subject-id" placeholder="题目编号">
                        </div>
                        <button type="submit" class="btn btn-default">添加</button>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

        <div class="modal fade" id="set-add" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增套题</h4>
                    </div>
                    <div class="modal-body">
                        <form action="/p/manage/add"  method="post">
                            <div class="form-group">
                                <label for="set-name">套题名称</label>
                                <input type="text" name="setName" class="form-control" id="set-name" placeholder="套题名称">
                            </div>
                            <div class="form-group">
                            <label class="radio-inline">
                                <input type="radio" name="subject" value="科目一">科目一</label>
                            <label class="radio-inline">
                                <input type="radio" name="subject" value="科目四">科目四</label>
                            </div>
                            <div class="form-group">
                            <label>车型
                            <select name="vehicleType" class="form-control">
                                <option value="C1C2C3C4">C1C2C3C4</option>
                                <option value="A1A3B1">A1A3B1</option>
                                <option value="A2B2">A2B2</option>
                                <option value="DEF">DEF</option>
                            </select>
                            </label>
                            </div>
                            <div class="form-group">
                                <label for="set-type">分类
                                <select name="type" id="set-type" class="form-control">
                                    <option value="小车科四">小车科四</option>
                                    <option value="">新增</option>
                                    <option value="新增">新增2</option>
                                    <option value="小车科四速成600">小车科四速成600</option>
                                    <option value="DJ备用科目四">DJ备用科目四</option>
                                </select>
                                </label>
                                <button class="btn btn-success">新建分类</button>
                                </div>
                            <button type="submit" class="btn btn-default">添加</button>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>

    <script>
        $(function () {
            $(".set-type").click(function () {
                $("#tboody").empty();
                var id = $(this).attr("id");
                $.get("/p/type/" + id, function (result) {
                   for(var i=0; i<result.length;i++){
                       $("#tboody").append($("<tr></tr>")
                           .append($("<td></td>").text(result[i].id))
                           .append($("<td></td>").text(result[i].setName))
                           .append($("<td></td>")
                               .append($("<a class='btn btn-success'></a>").text("查看").click(function () {
                                   var id = $(this).parent().parent().eq(0).children().eq(0).text();
                                   $.get("/p/set/" + id, function (result) {
                                       $("#pset").empty();
                                       for(var i=0;i<result.length;i++){
                                           $("#pset").append($("<tr></tr>").append($("<td></td>").text(result[i].id))
                                               .append($("<td></td>").text(result[i].problem))
                                               .append($("<td></td>").append($("<a class='btn btn-danger'>删除</a>"))));
                                       }
                                   });
                               }))
                               .append($("<a class='btn btn-info'></a>").text("修改"))
                               .append($("<a class='btn btn-primary'</a>").text("添加题目").click(function () {
                                   $('#subject-add').modal('show');
                               }))
                               .append($("<a class='btn btn-danger'></a>").text("删除").click(function () {
                                   var $row = $(this).parent().parent().eq(0).children();
                                   var con = confirm("确定删除《" + $row.eq(1).text() + "》吗?");
                                   if(con){
                                       $.post("/p/manage/delete/" + $row.eq(0).text());
                                       location.reload();
                                       alert("删除成功");
                                   }
                               })))
                       );}
                });
            });
        });
    </script>
</div>